<style lang="scss" scoped>
	@import '../style.scss';

	.title {
		height: 9vh;
		line-height: 11vh;
		text-align: center;
		font-size: 4.5vh;
		color: whitesmoke;
		font-family: "Hiragino Sans GB";
		font-weight: bolder
	}
</style>
<template>
	<div class="my_backgroud">
		<Row>
			<Col span="7" style="height:50vh">
			<tenant_rank_desc ref="tenant_rank_desc"></tenant_rank_desc>
			</Col>
			<Col span="10" style="height:50vh">
			<div style="height:14vh;" id="title">
				<div class="title">梧桐租户应用健康度</div>
				<div style="height:5vh;line-height:5vh;font-size: 2vh;text-align: center;color:whitesmoke">{{time}}</div>

			</div>
			<!--<tenants_status></tenants_status>-->
			<general_health ref="general_health"></general_health>

			</Col>
			<Col span="7">
			<!-- <tenant_rank_desc></tenant_rank_desc> -->
			<tenant_detail_dim></tenant_detail_dim>
			</Col>
		</Row>
		<Row style="height:50vh;">
			<Col span="12">
			<Row style="height:25vh">
				<Col span="14">
				<diff_dim_score_ratio ref="diff_dim_score_ratio"></diff_dim_score_ratio>
				</Col>

				<Col span="10">
				<general_score_ratio ref="general_score_ratio"></general_score_ratio>
				</Col>
			</Row>
			<Row>
				<Col span='24'>
				<diff_dim_rank ref="diff_dim_rank"></diff_dim_rank>
				</Col>
			</Row>

			</Col>

			<Col span="5">
			<diff_dim_score ref="diff_dim_score"></diff_dim_score>

			</Col>
			<Col span="7">
			<Row style="height:25vh;">
				<Col>
				<tenant_type_detail_score ref="tenant_type_detail_score"></tenant_type_detail_score>
				</Col>
			</Row>
			<Row style="height:25vh;">
				<Col>
				<tenant_type_ratio ref="tenant_type_ratio"></tenant_type_ratio>
				</Col>
			</Row>
			</Col>
		</Row>
	</div>
</template>
<script>
	import Axios from 'axios'
	import config from '../config.js'
	import tenants_status from './tenants_status'
	import mean_status from './mean_status'
	import general_health from './general_health';
	import diff_dim_score from './diff_dim_score';
	import general_score_ratio from './general_score_ratio';
	import diff_dim_score_ratio from './diff_dim_score_ratio';
	import diff_dim_rank from './diff_dim_rank';
	import tenant_rank_desc from './tenant_rank_desc';
	import tenant_detail_score from './tenant_detail_score';
	import tenant_detail_dim from './tenant_detail_dim';
	import tenant_type_ratio from './tenant_type_ratio';
	import tenant_type_detail_score from './tenant_type_detail_score';

	export default {
		name: 'mainpage',
		components: {
			tenants_status,
			mean_status,
			general_health,
			diff_dim_score,
			general_score_ratio,
			diff_dim_score_ratio,
			diff_dim_rank,
			tenant_rank_desc,
			tenant_detail_score,
			tenant_detail_dim,
			tenant_type_ratio,
			tenant_type_detail_score
		},
		data() {
			return {
				time: new Date().toLocaleString()
			}

		},
		mounted() {
			var that = this;
			setInterval(function() {
				let time = new Date().toLocaleString();
				that.time = time
			}, 1000)

			this.getData();
			// this.$store.state.data=100;
		},
		methods:{
			getData() {
				Axios.get(config.url+'/data')
					.then(response => {
						// this.$store.state.data = response.data
						this.$refs.general_health.initChart(response.data);
						this.$refs.tenant_rank_desc.initChart(response.data);
						this.$refs.diff_dim_score_ratio.initChart(response.data);
						this.$refs.diff_dim_rank.initChart(response.data);
						this.$refs.general_score_ratio.initChart(response.data);
						this.$refs.diff_dim_score.initChart(response.data);
						this.$refs.tenant_type_detail_score.initChart(response.data);
						this.$refs.tenant_type_ratio.initChart(response.data);
					})
					.catch(error => {
						console.log(error);
					});

					Axios.get(config.url+'/tenant?tenant=中移研究院-资费研究项目')
						.then(response => {
							// this.$store.state.data = response.data
							this.$store.commit('change_selected_tenant',response.data)
						})
						.catch(error => {
							console.log(error);
						});
			}
		}
	}


</script>
